<!--
 * @Description: 关于我编辑界面
 * @Autor: WangJin
 * @date: 2023-05-06 09:43:20
 * @LastEditors: WangJin
 * @LastEditTime: 2023-06-28 09:28:20
-->
<template>
  <div>
    <el-form
      :model="form"
      :rules="formRules"
      ref="formRef"
      label-position="top"
    >
      <el-form-item label="标题" prop="title" style="width: 50%">
        <el-input v-model="form.title" placeholder="请输入标题"></el-input>
      </el-form-item>

      <el-row :gutter="20" style="width: 50%">
        <el-col :span="12">
          <el-form-item label="网易云歌曲ID" prop="musicId">
            <el-input
              v-model="form.musicId"
              type="number"
              placeholder="请输入网易云歌曲ID（可选）"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="评论开关">
            <el-switch
              v-model="form.commentEnabled"
              :active-value="1"
              :inactive-value="0"
              active-text="评论"
            ></el-switch>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="正文" prop="content">
        <mavon-editor v-model="form.content" />
      </el-form-item>

      <el-form-item style="text-align: right">
        <el-button type="primary" icon="el-icon-check" @click="submit"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { getInfo, update } from '@/api/personalDetail'
import { formRules } from '@/crud/about'
export default {
  name: 'About',
  components: { Breadcrumb },
  data() {
    return {
      form: {
        id: null,
        title: '',
        musicId: null,
        content: '',
        commentEnabled: 1
      },
      /**
       * 表单规则
       */
      formRules
    }
  },
  created() {
    this.getData()
  },
  methods: {
    /**
     * 获取关于我详情数据
     */
    getData() {
      getInfo().then(res => {
        if (res.code === 0) {
          const data = res.data
          this.form.title = data.title
          this.form.musicId = data.musicId
          this.form.content = data.content
          this.form.commentEnabled = data.commentEnabled
          this.form.id = data.id
        } else {
          this.msgError(res.msg)
        }
      })
    },

    /**
     * 更新操作
     *
     * @return {*}
     * @description:
     * @author: WangJin
     * @date: 2023-05-09 10:06:31
     */
    submit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          //纯数字
          const reg = /^\d{1,}$/
          if (!reg.test(this.form.musicId)) {
            return this.msgError('歌曲ID有误')
          }
          update(this.form).then(res => {
            this.msgSuccess(res.msg)
          })
        } else {
          return this.msgError('请填写必要的表单')
        }
      })
    }
  }
}
</script>

<style scoped></style>
